<template>
  <div class="app-container">
    <el-row class="tac">
      <!-- <el-col :span="12" style="width: 55%;"> -->
      <el-col :span="12">
        <el-select
          id="cj_select"
          v-model="selectedScene"
          placeholder="请选择战场场景"
        >
          <el-option
            v-for="item in scenetable"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="getSslListBySceneID(item.value)"
          />
        </el-select>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="35vh"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="杀伤链" width="100" sortable>
            <template slot-scope="scope">{{
              "杀伤链-" + scope.row.id
            }}</template>
          </el-table-column>
          <el-table-column prop="spyEquipment" label="侦察探测装备" width="140">
          </el-table-column>
          <el-table-column
            prop="identificationEquipment"
            label="指挥控制装备"
            width="140"
          >
          </el-table-column>
          <!--      <el-table-column-->
          <!--        prop="decisionEquipment"-->
          <!--        label="火力打击装备"-->
          <!--        width="200">-->
          <!--      </el-table-column>-->
          <el-table-column
            prop="strikeEquipment"
            label="火力打击装备"
            width="140"
          >
          </el-table-column>
          <el-table-column prop="time" label="时间" width="120">
          </el-table-column>
          <el-table-column prop="interceptionP" label="截获概率(%)" width="120">
          </el-table-column>
          <el-table-column
            prop="accuracy"
            label="精度(%)"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
          <el-button @click="toggleSelection([tableData[1], tableData[2]])"
            >选择</el-button
          >
          <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
        </div>
      </el-col>
      <el-col :span="12">
        <!-- Flex布局的容器 -->
        <div class="flex-container">
          <!-- 三个等宽的div -->
          <!-- <div class="flex-item" id="timeChain">Div 1</div> -->
          <div class="flex-item" id="precisionChain">Div 2</div>
          <!-- <div class="flex-item" id="accuracyChain">Div 3</div> -->
        </div>
      </el-col>
    </el-row>
    <el-select
      style="margin-left: 20px"
      id="ssl_select"
      v-model="selectedSSl"
      placeholder="请选择杀伤链"
    >
      <el-option
        v-for="item in ssltable"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        @click.native="fetchThreeChainData(item.label)"
      />
    </el-select>
    <div id="help">
      <div id="satellite_scene" v-show="show_help == 1">
        <h3 style="margin-left: 20px">卫星准确度展示</h3>
        <form @submit.prevent="submitForm">
          <h4 style="margin-left: 40px">雷达范围数据设置（单位：km）</h4>
          <div style="margin-left: 50px; display: flex; gap: 10px">
            <el-input
              v-model="cone_position1[0]"
              placeholder="请输入战机雷达x坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position1[1]"
              placeholder="请输入战机雷达y坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position1[2]"
              placeholder="请输入战机雷达z坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position1[3]"
              placeholder="请输入战机到目标中心距离处的探测半径"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position1[4]"
              placeholder="请输入战机雷达到目标中心距离"
              type="number"
              :step="0.01"
            ></el-input>
          </div>
          <h4 style="margin-left: 40px">卫星探测敌方目标设置（单位：km）</h4>
          <div style="margin-left: 50px; display: flex; gap: 10px">
            <el-input
              v-model="cylinder_position1[0]"
              placeholder="请输入卫星目标x坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cylinder_position1[1]"
              placeholder="请输入卫星目标y坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cylinder_position1[2]"
              placeholder="请输入卫星目标z坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cylinder_position1[3]"
              placeholder="请输入卫星目标高度"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cylinder_position1[4]"
              placeholder="请输入卫星目标半径"
              type="number"
              :step="0.01"
            ></el-input>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <el-button
              type="primary"
              native-type="submit"
              style="min-width: 120px"
              >提交</el-button
            >
          </div>
        </form>
        <div id="demo" style="margin-top: 20px" />
      </div>
      <div id="early_aircraft_scene" v-show="show_help == 2">
        <h3 style="margin-left: 20px">精度展示</h3>
        <form v-if=false @submit.prevent="submitForm2">
          <h4 style="margin-left: 40px">友方雷达范围数据设置（单位：km）</h4>
          <div style="margin-left: 50px; display: flex; gap: 10px">
            <el-input
              v-model="cone_position2[0]"
              placeholder="请输入友方雷达x坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position2[1]"
              placeholder="请输入友方雷达y坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position2[2]"
              placeholder="请输入友方雷达z坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position2[3]"
              placeholder="请输入友方到敌方中心距离处的探测半径"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="cone_position2[4]"
              placeholder="请输入友方雷达到目标中心距离"
              type="number"
              :step="0.01"
            ></el-input>
          </div>
          <h4 style="margin-left: 40px">敌方目标位置设置（单位：km）</h4>
          <div style="margin-left: 50px; display: flex; gap: 10px">
            <el-input
              v-model="sphere_position2[0]"
              placeholder="请输入敌方目标x坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="sphere_position2[1]"
              placeholder="请输入敌方目标y坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="sphere_position2[2]"
              placeholder="请输入敌方目标z坐标"
              type="number"
              :step="0.01"
            ></el-input>
            <el-input
              v-model="sphere_position2[3]"
              placeholder="请输入敌方目标半径"
              type="number"
              :step="0.01"
            ></el-input>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <el-button
              type="primary"
              native-type="submit"
              style="min-width: 120px"
              >提交</el-button
            >
          </div>
        </form>
        <div id="demo2" style="margin-top: 20px" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import {
  getList,
  getChainInfo,
  getSslListBySceneID,
  getSceneList,
  getPrecisionChainBySSLID,
  getTimeChainBySSLID,
} from "@/api/ssl";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  data() {
    return {
      cone_position1: [],
      show_help: null,
      cylinder_position1: [],
      cone_position2: [],
      sphere_position2: [],
      scene: null,
      camera: null,
      renderer: null,
      scene2: null,
      camera2: null,
      renderer2: null,
      ssltable: [{}],
      selectedSSl: null,
      selectedScene: null,
      scenetable: [],
      echartsInstances: [], // 用于存储 ECharts 实例
      tableData: [],
      multipleSelection: [],
      timeChainOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          position: "right",
          name: "时间/s",
        },
        xAxis: {
          type: "category",
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: [],
        },
        series: [
          {
            name: "F1发现",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "F2定位",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [10, 1320, 101, 134, 90, 230, 210],
          },
          {
            name: "T1跟踪",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "T2瞄准",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "E打击",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "A评估",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
        ],
      },
      precisionChainOption: {
        xAxis: {
          type: "category",
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: [],
        },
        yAxis: {
          name: "精度/%",
          position: "right",
          type: "value",
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: "#a90000",
                },
              },
              150,
              80,
              70,
              110,
              130,
            ],
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            type: "bar",
          },
        ],
      },
      accuracyChainOption: {
        xAxis: {
          type: "category",
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: [],
        },
        yAxis: {
          name: "准确度/%",
          position: "right",
          type: "value",
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: "#a90000",
                },
              },
              150,
              80,
              70,
              110,
              130,
            ],
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            type: "bar",
          },
        ],
      },
    };
  },

  methods: {
    // check() {
    //   var id = this.$route.query.id;
    //   var index = null;
    //   if (id) {
    //     for(let i = 0; i < this.tableData.length; i += 1) {
    //       if (this.tableData[i].id === parseInt(id)) {
    //         index = i
    //         break
    //       }
    //     }
    //     this.$refs.multipleTable.toggleRowSelection(this.tableData[index])
    //     this.handleSelectionChange([this.tableData[index]])
    //   }

    // },
    createhelp() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.renderer = new THREE.WebGLRenderer();
      this.scene2 = new THREE.Scene();
      this.camera2 = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.renderer2 = new THREE.WebGLRenderer();
    },
    createThreeScene() {
      this.renderer.setClearColor(0xffffff);
      this.renderer.setSize(window.innerWidth * 0.8, window.innerHeight);
      this.renderer.domElement.style.border = "1px solid #000";
      document.getElementById("demo").appendChild(this.renderer.domElement);

      // 定义圆锥体的参数
      var cone_x = this.cone_position1[0];
      var cone_y = this.cone_position1[1];
      var cone_z = this.cone_position1[2];
      var cone_r = this.cone_position1[3];
      var cone_h = this.cone_position1[4];
      var radialSegments = 32;
      var conegeometry = new THREE.ConeGeometry(cone_r, cone_h, radialSegments);

      // 创建线框网格材质
      var wireframeMaterial1 = new THREE.LineBasicMaterial({ color: 0x000000 }); // 设置线框材质
      var wireframeGeometry1 = new THREE.WireframeGeometry(conegeometry);
      var wireframe1 = new THREE.LineSegments(
        wireframeGeometry1,
        wireframeMaterial1
      );

      this.scene.add(wireframe1);
      cone_x = cone_x - cone_h / 2;

      wireframe1.rotation.z = -Math.PI / 2;

      // 定义圆柱体的参数
      var cylinder_x = this.cylinder_position1[0];
      var cylinder_y = this.cylinder_position1[1];
      var cylinder_z = this.cylinder_position1[2];
      var cylinderRadius = this.cylinder_position1[3];
      var cylinderHeight = this.cylinder_position1[4];
      var cylinderGeometry = new THREE.CylinderGeometry(
        cylinderRadius,
        cylinderRadius,
        cylinderHeight,
        16
      );

      // 创建线框网格材质
      var wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 }); // 紫色线框材质
      var wireframeGeometry = new THREE.WireframeGeometry(cylinderGeometry);
      var wireframe = new THREE.LineSegments(
        wireframeGeometry,
        wireframeMaterial
      );

      this.scene.add(wireframe);
      wireframe.position.set(cylinder_x, cylinder_y, cylinder_z); // 设置线框网格的位置
      wireframe1.position.set(cone_x, cone_y, cylinder_z);

      // this.camera.position.set((cone_x+cylinder_x)/2, (cone_y+cylinder_y)/2, (cone_z+cylinder_z)/2+1.5*cone_r)
      this.camera.position.set(
        (cone_x + cylinder_x) / 2,
        (cone_y + cylinder_y) / 2,
        (cone_z + cylinder_z) / 2 + cone_h / 2 + cylinderHeight
      );
      this.camera.lookAt(
        (cone_x + cylinder_x) / 2,
        (cone_y + cylinder_y) / 2,
        (cone_z + cylinder_z) / 2
      );
      // 创建 OrbitControls 控制器
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      // 设置控制器的初始位置
      controls.target.set(0, 0, 0); // 控制器的焦点位置
      controls.update();

      let _this = this;
      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        _this.renderer.render(_this.scene, _this.camera);
      }
      animate();
    },
    createThreeScene2() {
      this.renderer2.setClearColor(0xffffff);
      this.renderer2.setSize(window.innerWidth * 0.8, window.innerHeight);
      this.renderer2.domElement.style.border = "1px solid #000";
      document.getElementById("demo2").appendChild(this.renderer2.domElement);

      // 定义圆锥体的参数
      var cone_x = this.cone_position2[0];
      var cone_y = this.cone_position2[1];
      var cone_z = this.cone_position2[2];
      var cone_r = this.cone_position2[3];
      var cone_h = this.cone_position2[4];
      var radialSegments = 32;
      var conegeometry = new THREE.ConeGeometry(cone_r, cone_h, radialSegments);

      // 创建线框网格材质
      var wireframeMaterial1 = new THREE.LineBasicMaterial({ color: 0x000000 }); // 设置线框材质
      var wireframeGeometry1 = new THREE.WireframeGeometry(conegeometry);
      var wireframe1 = new THREE.LineSegments(
        wireframeGeometry1,
        wireframeMaterial1
      );

      this.scene2.add(wireframe1);
      cone_x = cone_x - cone_h / 2;

      wireframe1.rotation.z = -Math.PI / 2;

      // 定义圆柱体的参数
      var sphere_x = this.sphere_position2[0];
      var sphere_y = this.sphere_position2[1];
      var sphere_z = this.sphere_position2[2];
      var sphere_r = this.sphere_position2[3];
      var SphereGeometry = new THREE.SphereGeometry(sphere_r, 16, 16);

      // 创建线框网格材质
      var wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 }); // 线框材质
      var wireframeGeometry = new THREE.WireframeGeometry(SphereGeometry);
      var wireframe = new THREE.LineSegments(
        wireframeGeometry,
        wireframeMaterial
      );

      this.scene2.add(wireframe);
      wireframe.position.set(sphere_x, sphere_y, sphere_z); // 设置线框网格的位置
      wireframe1.position.set(cone_x, cone_y, sphere_z);
      // this.camera.position.set((cone_x+cylinder_x)/2, (cone_y+cylinder_y)/2, (cone_z+cylinder_z)/2+1.5*cone_r)
      this.camera2.position.set(
        (cone_x + sphere_x) / 2 + cone_h / 2,
        (cone_y + sphere_y) / 2,
        (cone_z + sphere_z) / 2 + cone_h + sphere_r
      );
      this.camera2.lookAt(
        (cone_x + sphere_x) / 2,
        (cone_y + sphere_y) / 2,
        (cone_z + sphere_z) / 2
      );
      // 创建 OrbitControls 控制器
      const controls = new OrbitControls(
        this.camera2,
        this.renderer2.domElement
      );
      // 设置控制器的初始位置
      controls.target.set(0, 0, 0); // 控制器的焦点位置
      controls.update();

      let _this = this;
      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        _this.renderer2.render(_this.scene2, _this.camera2);
      }
      animate();
    },
    submitForm() {
      while (this.scene.children.length > 0) {
        this.scene.remove(this.scene.children[0]);
      }
      this.createThreeScene();
    },
    submitForm2() {
      while (this.scene2.children.length > 0) {
        this.scene2.remove(this.scene2.children[0]);
      }
      this.createThreeScene2();
    },
    fetchThreeChainData(selectedValue) {
      console.log("response.data");
      const ssl_id = parseInt(selectedValue.match(/\d+/)[0]);
      getPrecisionChainBySSLID(ssl_id).then((response) => {
        let temp_data = response.data;
        console.log(temp_data);
        if (temp_data.satelliteDetectionPosition == null) {
          console.log("卫星为空");
          var early_wraning_detection_position =
            temp_data.earlyWraningDetectionPosition.split(",");
          var early_wraning_detection_position_int =
            early_wraning_detection_position.map(function (coordinate) {
              return parseFloat(coordinate, 10);
            });
          this.sphere_position2 = early_wraning_detection_position_int;
          var fighter_position = temp_data.fighterPosition.split(",");
          var fighter_position_int = fighter_position.map(function (
            coordinate
          ) {
            return parseFloat(coordinate, 10);
          });
          this.cone_position2 = fighter_position_int;
          this.show_help = 2;
          while (this.scene2.children.length > 0) {
            this.scene2.remove(this.scene2.children[0]);
          }
          this.createThreeScene2();
          console.log(this.sphere_position2[3]);
        } else if (temp_data.earlyWraningDetectionPosition == null) {
          console.log("预警机为空");
          console.log(temp_data.satelliteDetectionPosition);
          console.log(temp_data.fighterPosition);
          var satellite_detection_position =
            temp_data.satelliteDetectionPosition.split(",");
          var satellite_detection_position_int =
            satellite_detection_position.map(function (coordinate) {
              return parseFloat(coordinate, 10);
            });
          this.cylinder_position1 = satellite_detection_position_int;
          var fighter_position = temp_data.fighterPosition.split(",");
          var fighter_position_int = fighter_position.map(function (
            coordinate
          ) {
            return parseFloat(coordinate, 10);
          });
          this.show_help = 1;
          while (this.scene.children.length > 0) {
            this.scene.remove(this.scene.children[0]);
          }
          this.cone_position1 = fighter_position_int;
          this.createThreeScene();
        }
      });
    },
    getssl() {
      if (this.selectedScene == null) {
        return;
      }
      const scene_id = parseInt(this.selectedScene.match(/\d+/)[0]);
      console.log("sceneId");
      console.log(scene_id);
      getList(scene_id)
        .then((response) => {
          console.log("getssl/getlist");
          console.log(response);
          // Assuming the response contains an array of SSL data
          this.tableData = response.data.map((item) => {
            // 使用replace方法去掉字符串两侧的方括号
            const modifiedItem = {
              ...item,
              spyEquipment: item.spyEquipment.replace(/^\[|\]$/g, ""),
              identificationEquipment: item.identificationEquipment.replace(
                /^\[|\]$/g,
                ""
              ),
              // decisionEquipment: item.decisionEquipment.replace(/^\[|\]$/g, ''),
              strikeEquipment: item.strikeEquipment.replace(/^\[|\]$/g, ""),
            };

            return modifiedItem;
          });
          this.tableData.forEach((item) => {
            item.time = item.time.toFixed(2);
            item.accuracy=(item.accuracy*100.0).toFixed(2);
            item.precision=(item.precision*100.0).toFixed(2);
            item.interceptionP=(item.interceptionP*100.0).toFixed(2);
            item.p0=(item.p0*100.0).toFixed(2);
            item.p1=(item.p1*100.0).toFixed(2);
            item.p2=(item.p2*100.0).toFixed(2);
          });
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    getChainInfoHelp(idList) {
      getChainInfo(idList)
        //axios.post('http://localhost:8081/ssl/chainInfo',idList)
        .then((response) => {
          // 处理后端的响应
          console.log(response);
          this.timeChainOption.xAxis.data = this.multipleSelection.map(
            (item) => "杀伤链-" + item.id
          );
          this.precisionChainOption.xAxis.data = this.multipleSelection.map(
            (item) => "杀伤链-" + item.id
          );
          this.accuracyChainOption.xAxis.data = this.multipleSelection.map(
            (item) => "杀伤链-" + item.id
          );
          this.timeChainOption.series[0].data = response.data.t0;
          this.timeChainOption.series[1].data = response.data.t1;
          this.timeChainOption.series[2].data = response.data.t2;
          this.timeChainOption.series[3].data = response.data.t3;
          this.timeChainOption.series[4].data = response.data.t4;
          this.timeChainOption.series[5].data = response.data.t5;
          this.precisionChainOption.series[0].data = response.data.v.map(
            (item) => (item * 100).toFixed(2)
          );
          this.accuracyChainOption.series[0].data = response.data.p.map(
            (item) => (item * 100).toFixed(2)
          );
          this.drawLine();
        })
        .catch((error) => {
          // 处理请求错误
          console.error(error);
        });
    },
    getChainInfo() {
      const idList = this.multipleSelection.map((item) => item.id);
      console.log(idList);
      this.getChainInfoHelp(idList);
    },
    toggleSelection() {
      this.getChainInfo();
      this.drawLine();
      // if (rows) {
      //   rows.forEach(row => {
      //     this.$refs.multipleTable.toggleRowSelection(row);
      //   });
      // } else {
      //   this.$refs.multipleTable.clearSelection();
      // }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    drawLine() {
      // // 初始化echarts实例
      // let timeChain = echarts.init(document.getElementById('timeChain'))
      // console.log("382:timeChain");
      // console.log(timeChain);
      let precisionChain = echarts.init(
        document.getElementById("precisionChain")
      );
      // let accuracyChain = echarts.init(document.getElementById('accuracyChain'))
      // this.echartsInstances = [timeChain, precisionChain, accuracyChain];
      this.echartsInstances = [precisionChain];
      // 绘制图表
      // timeChain.setOption(this.timeChainOption);
      precisionChain.setOption(this.precisionChainOption);
      // accuracyChain.setOption(this.accuracyChainOption)
      this.reloadPage();
    },
    reloadPage() {
      // 页面刷新
      this.echartsInstances.forEach((instance) => {
        instance.resize();
      });
    },
    handleRouter() {
      this.getSslListBySceneID(this.selectedScene);
    },
    getScene() {
      getSceneList().then((response) => {
        this.scenetable = response.data.map((item) => {
          return {
            value: "选项" + item.sceneId, //设置value的值
            // label:'战场场景'+item.sceneId//设置label的值
            label: item.name,
          };
        });
      });
    },
    getSslListBySceneID(selectedValue) {
      console.log("getSslListBySceneID");
      if (selectedValue == null) return;
      console.log(selectedValue);
      this.selectedScene = selectedValue;
      this.getssl();
      const scene_id = parseInt(selectedValue.match(/\d+/)[0]);
      getSslListBySceneID(scene_id).then((response) => {
        this.ssltable = response.data.map((item) => {
          return {
            value: "选项" + item.sslId, //设置value的值
            label: "杀伤链" + item.sslId, //设置label的值
          };
        });
      });
      // getSslListBySceneID(ssl_id)
      //   .then(response=>{
      //     console.log(response.data)
      //     console.log(response.data)
      //     var idList = []
      //     for(let i=0;i<response.data.length;i++){
      //       idList.push(response.data[i].sslId)
      //     }
      //     // console.log(idList)
      //     this.getChainInfoHelp(idList)
      //   })
    },
  },
  mounted() {
    this.createhelp();
    this.getScene();
    console.log("sceneId" + this.$route.query.selectedScene);
    this.selectedScene = this.$route.query.selectedScene;
    this.handleRouter();
    // this.handleRouter()
    this.getssl();
    this.getChainInfo();
    // await this.drawLine();
    // this.check();
    window.addEventListener("resize", this.reloadPage);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.reloadPage);
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
#demo {
  width: 80%;
  /* color: transparent;*/
}

.flex-container {
  margin-top: 20px; /* 设置顶部边距以区分三个div */
  /* display: flex; */
  height: 50vh; /* 设置高度为视口高度的50% */
}
.tac {
  height: 50vh;
}
.flex-item {
  display: flex;
  flex: 1;
  border: 1px solid #ccc; /* 添加边框以示区分 */
  padding: 10px; /* 添加内边距以美化样式 */
  height: 80%;
  /* width: 90%; */
}
.app-container {
  width: 100%;
}
#ssl_select {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}
</style>

